<template>
  <view class="H">
    <u-modal v-model="delshow" :show-cancel-button="true" content="商品数量要减完啦,确认删除该商品吗" @confirm="delcart"></u-modal>
    <!-- 头部 -->
    <view class="headss">
      <span class='headss-name'>共{{cartstore.allcount}}件宝贝</span>
      <span class='headss-set' @click='updataitem'>{{show ? '编辑':'完成'}}</span>
    </view>
    <!-- 空的购物车 -->
    <view class="empty-cart" v-if="cartlist.list.length===0">
      <view class="empty">
        <image src="https://ma.faisys.com/dist/static/img/emptyCart2.6c844f7f.png" mode=""></image>
      </view>
      <span class='empty-name'>{{user.token?'亲，购物车还是空的哦':'登录后才能查看'}}</span>
    </view>
    <!-- 有东西的购物车 -->

    <view class="Full" v-else>

      <u-swipe-action :show="cuuner===index" v-for="(item, index) in cartlist.list" :key="item.id" @open="open(index)"
        @click="delcarter(item.id)" :options="options">

        <view class="item u-border-bottom">
          <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
          <view class="title-wrap">
            <view class="Full-item">
              <!-- 左 -->
              <view class="item-z">
                <!-- 成功success 失败circle -->
                <icon :type="item.checked ? 'success':'circle'" :color="item.checked ? '#ffaa00':'#999'"
                  @click.stop="chected(item.id)" size="20">
                </icon>
              </view>
              <!-- 中 -->
              <view class="item-c"  @click="tiaozhuan(item.goodsid)">
                <!-- 图片 -->
                <view class="item-img">
                  <image :src="item.image_url" mode=""></image>
                </view>
              </view>
              <!-- 右 -->
              <view class="item-nr">
                <text class="nr-title">{{item.name}}</text>
                <text class="nr-guige">规格：默认</text>
                <text class="nr-price">￥{{item.unit_price}}</text>
                <!-- 右 -->
                <view class="item-y">
                  <!-- 减 -->
                  <u-icon name="minus-circle" size="55rpx" click="subtract(item)"
                    @click="cutcount(item.id,item.quantity)"></u-icon>
                  <u-input input-align="center" placeholder="数量" height="50rpx" v-model="item.quantity" type="number"
                    @blur="isnumber(item.quantity,item.id)" />
                  <!-- 加 -->
                  <u-icon name="plus-circle-fill" size="55rpx" color="#ffaa00" click="countadd(item)"
                    @click="addcount(item.id)"></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
      </u-swipe-action>
    </view>
    <!-- 会喜欢 -->
    <view class="split-line">
      <u-icon class="aixin" name="heart"></u-icon>
      <view class="live">
        您或许会喜欢
      </view>
    </view>
    <!-- 猜你喜欢 -->
    <view class="lo">
      <Lamplike></Lamplike>
    </view>
    <Lampfooter></Lampfooter>
    <!-- 空盒子 -->
    <view class="Fulls">
    </view>
    <!-- 结算 -->
    <view class="price">
      <!-- 成功success 失败circle -->
      <icon :type="cartstore.allChecked ? 'success':'circle'" :color="cartstore.allChecked ? '#ffaa00':'#999'"
        @click="All(cartstore.allChecked)" size="20"></icon>

      <text>全选</text>
      <!-- 总价和结算 -->
      <view class="price-set" v-if="show">
        <!-- 总价 -->
        <view>
          <text class="price-z">总价：</text>
          <text class="price-y">￥{{cartstore.total}}</text>
        </view>
        <!-- 结算 -->
        <view :class="cartstore.onleChecked  ? 'jiesuans' :  'jiesuan'" @click="calculate(cartstore.onleChecked)">
          <text class=" jiesuan-name">结算</text>
        </view>
      </view>
      <!-- 删除 -->
      <view class="delete-item" v-else>
        <!-- 删除按钮 -->
        <view :class="cartstore.onleChecked? 'delete-butt' :  'delete-but'" @click="detechected(cartstore.onleChecked)">
          <text class="delete-name" >删除</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import Lamplike from "/src/components/Lamplike/Lamplike.vue"
  import Lampfooter from "/src/components/Lampfooter/Lampfooter.vue"
  import {
    cartStore
  } from "../../store/cart.js"
  import {
    useUserStore
  } from "../../store/user.js"
  const userStore = useUserStore()
  import {
    addressUserStore
  } from "../../store/address.js"
  const  addressStore= addressUserStore()
  const {
    user
  } = userStore
  import {
    reactive,
    ref
  } from 'vue';
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app';
  //定义是否弹出删除确认框
  const delshow = ref(false)
  //当前选中删除id
  const delid = ref(0)
  // 购物车有没有东西
  const state = ref(false)
  // 编辑和删除
  const show = ref(true)
  // 编辑和删除
  const updataitem = () => {
    show.value = !show.value
  }

  //购物车
  const cartstore = cartStore()
  //获取购物车列表
  const {
    cartlist
  } = cartstore
  onShow(() => {
    //获取购物车信息
    cartstore.getcart()
  });
  //滑动框
  const options = ref([

    {
      text: '删除',
      style: {
        backgroundColor: '#dd524d'
      }
    }
  ])
  //定义要打开的滑块
  const cuuner = ref(0)

  function open(index) {
    cuuner.value = index
  }
  //判断数量是否是数值
  function isnumber(value, id) {
    if (isNaN(value)) {
      uni.showToast({
        title: '请输入数字',
        duration: 2000,
        icon: "error"
      });
    } else if (value < 0) {
      uni.showToast({
        title: '数量不能为负',
        duration: 2000,
        icon: "error"
      });
    } else {
      const data = {
        "id": id,
        "count": value
      }
      cartstore.setcount(data)
    }
  }
  //数量减一
  function cutcount(id, count) {
    if (count <= 1) {
      delshow.value = true
      //更改id为删除id
      delid.value = id
    } else {
      cartstore.cutcount(id)
    }
  }
  //数量加一
  function addcount(id) {
    cartstore.addcount(id)
  }
  //确认删除吗
  function delcart() {
    cartstore.deletecart(delid.value)
  }
  //选中
  function chected(id) {
    cartstore.chected(id)
  }
  //点击全选
  function All(bool){
    cartstore.allchected(bool)
  }
  //删除数据
  function delcarter(id) {
    cartstore.deletecart(id)
  }
  //删除选中
  function detechected(judge){
    if(!judge){
      uni.showToast({
        title: '没有选中',
        duration: 2000,
        icon: "error"
      });
    }else{
       cartstore.detechect()
    }
  }
  //结算
  function calculate(judge){
    if(!judge){
      uni.showToast({
        title: '没有选中',
        duration: 2000,
        icon: "error"
      });
    }else{
      //获取默认地址
        addressStore.getdeladdre()
      uni.navigateTo({
        url:"/subPack/submitorder/submitorder"
      })
    }
  }
  //跳转详情
  function tiaozhuan(goodid){
    uni.navigateTo({
      url: `/subPack/goods_detail/goods_detail?goods_id=${goodid}`
    })
  }
</script>
<style scoped lang="scss">
  .H {
    width: 100%;
    // height: 2000rpx;
    background-color: #f4f4f4;
    // border: 1px solid red;

    // 头部
    .headss {
      height: 60rpx;
      line-height: 50rpx;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      padding: 0 20rpx;
      background-color: #fff;


      .headss-name {

        font-size: 35rpx;
      }

      .headss-set {
        font-size: 35rpx;
        font-weight: 600;

        margin-right: 20rpx;
      }
    }

    // 空的购物车
    .empty-cart {
      text-align: center;
      width: 100%;
      height: 720rpx;
      // border: 1px solid red;
      overflow: hidden;
      background-color: #f7f7f7;
      // display: block;

      .empty {

        image {
          width: 80%;

        }

        .empty-name {
          display: block;
          color: #333;
          font-size: 25rpx;
        }
      }
    }

    // 空盒子
    .Fulls {
      width: 100%;
      height: 120rpx;
    }

    // 满的购物车
    .Full {

      // border: 1px solid red;


      // display: none;
      background-color: #fff;
      border-bottom: 1px solid #eaeaea;
      // 标题


      // 每个item
      .Full-item {
        width: 100%;
        height: 300rpx;
        display: flex;
        border-top: 1px solid #f4f4f4;
        border-bottom: 1px solid #f4f4f4;

        // 左
        .item-z {
          width: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;

        }

        // 中
        .item-c {

          // border: 1px solid red;
          display: flex;

          // 图片
          .item-img {
            width: 200rpx;
            height: 300rpx;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            /* 垂直居中 */

            image {
              width: 100%;
              height: 70%;
              border-radius: 10rpx;
            }
          }


        }

        // 内容
        .item-nr {
          width: 450rpx;
          height: 300rpx;
          // border: 1px solid red;

          position: relative;

          .nr-title {
            margin: 20rpx 10rpx;
            margin-top: 50rpx;
            font-size: 30rpx;
            overflow: hidden;

            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .nr-guige {
            display: block;
            color: #888888;

            margin-left: 20rpx;
            font-size: 12px;
          }

          .nr-price {
            display: block;
            margin-left: 20rpx;
            margin-top: 10rpx;

          }

          // 右
          .item-y {
            width: 180rpx;
            height: 80rpx;
            // border: 1px solid red;
            position: absolute;
            bottom: 50rpx;
            right: 10rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;



          }
        }
      }
    }

    // 分割线
    .split-line {
      display: flex;

      height: 100rpx;
      line-height: 100rpx;
      // border: 1px solid red;
      justify-content: center;


      .live {
        margin-left: 10rpx;
        font-size: 30rpx;
        color: #999;

      }
    }

    .lo {

      // border: 1px solid red;
    }

    // 结算
    .price {
      margin-top: 100rpx;
      width: 100%;
      height: 120rpx;
      // border: 1px solid red;
      border-top: 1px solid #e2e2e2;
      position: fixed;
      bottom: 0;
      left: 0;

      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

      // 总价和结算
      .price-set {
        width: 80%;
        height: 90rpx;
        line-height: 90rpx;
        // border: 1px solid red;
        color: #ffaa00;
        padding-left: 20rpx;
        display: flex;
        justify-content: space-between;
        // display: none;

        .price-z {
          font-size: 15px;

        }

        .price-y {
          font-size: 15px;
          position: relative;
          left: -10rpx;
        }

        .jiesuan {
          width: 240rpx;
          height: 80rpx;
          line-height: 80rpx;
          margin-top: 4rpx;
          // border: 1px solid red;
          border-radius: 50px;
          background-color: #989898;
          // background-color: black;

          .jiesuan-name {
            display: block;
            text-align: center;
            color: white;
            font-size: 16px;
          }

        }

        .jiesuans {
          width: 240rpx;
          height: 80rpx;
          line-height: 80rpx;
          margin-top: 4rpx;
          // border: 1px solid red;
          border-radius: 50px;
          background-color: #ffaa00;

          .jiesuan-name {
            display: block;
            text-align: center;
            color: white;
            font-size: 16px;
          }

        }
      }

      // 删除
      .delete-item {
        width: 80%;
        height: 90rpx;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .delete-but {
          width: 150rpx;
          height: 60rpx;
          line-height: 60rpx;
          border: 1px solid #989898;
          border-radius: 50px;
          text-align: center;

          .delete-name {
            color: #989898;
          }
        }

        .delete-butt {
          width: 150rpx;
          height: 60rpx;
          line-height: 60rpx;
          border: 1px solid #333333;
          border-radius: 50px;
          text-align: center;

          .delete-name {
            color: #333333;
          }
        }
      }
    }
  }
</style>